import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Switch, Redirect } from 'react-router'
import { PrivateRoute } from 'components/route'
import { Subscription } from 'react-apollo'
import { global as globalDuck, dataset as datasetDuck } from 'ducks'
import GetCurrentProjectMember from 'graphql/project/queryProjectMember.graphql'
import Loading from 'components/loading'
import Dash from './dashboard'
import Dataset from './dataset'
import Config from './config'
import Task from './task'
import Work from './projectWork'
import Nav from './projectNav'
import User from './members'
import Assign from './taskAssign'
import Download from './download'

class Org extends Component {
  state = { activeItem: '' }

  componentDidMount = () => {
    const { actionSetActiveNavItem } = this.props
    actionSetActiveNavItem('org')
  }

  setActiveItem = item => this.setState({ activeItem: item })

  render() {
    const { location, match, user } = this.props
    const { orgName, projectName } = match.params
    const { activeItem } = this.state
    return (
      <Subscription
        subscription={GetCurrentProjectMember}
        variables={{ userId: user.id, orgName, projectName }}
      >
        {({ loading, error, data }) => {
          if (loading) return <Loading />
          if (error) return `Error! ${error.message}`
          if (data && data.project_member.length === 0) return 'Loading...'
          const projectMember = data.project_member[0]
          const role = projectMember ? projectMember.role : 'member'
          const projectMemberInfo = {
            orgName,
            orgId: projectMember.project_object.owner_object.id,
            projectName,
            projectId: projectMember.project_object.id,
            role,
          }
          return (
            <React.Fragment>
              <Nav
                activeItem={activeItem}
                orgName={orgName}
                projectName={projectName}
                role={role}
              />
              <Switch location={location}>
                {(role === 'admin' || role === 'owner') && (
                  <Redirect exact path={`${match.url}`} to={`${match.url}/dashboard`} />
                )}
                {role === 'member' && (
                  <Redirect exact path={`${match.url}`} to={`${match.url}/work`} />
                )}
                <Redirect exact path={`${match.url}`} to={`${match.url}/work`} />
                <PrivateRoute
                  path={`${match.url}/dashboard`}
                  render={props => (
                    <Dash
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      project={projectMemberInfo}
                    />
                  )}
                  exact
                />
                <PrivateRoute
                  path={`${match.url}/dataset`}
                  render={props => (
                    <Dataset
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      project={projectMemberInfo}
                    />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/task`}
                  render={props => (
                    <Task
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      project={projectMemberInfo}
                    />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/work`}
                  render={props => (
                    <Work
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      project={projectMemberInfo}
                    />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/config`}
                  render={props => (
                    <Config
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      project={projectMemberInfo}
                    />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/user`}
                  render={props => (
                    <User
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      project={projectMemberInfo}
                    />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/download`}
                  render={props => (
                    <Download
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      project={projectMemberInfo}
                    />
                  )}
                  exact={false}
                />
                <PrivateRoute
                  path={`${match.url}/assign`}
                  render={props => (
                    <Assign
                      {...props}
                      setParentActiveItem={this.setActiveItem}
                      project={projectMemberInfo}
                    />
                  )}
                  exact={false}
                />
                <Redirect from="*" to={`${match.url}`} />
              </Switch>
            </React.Fragment>
          )
        }}
      </Subscription>
    )
  }
}

const mapStateToProps = state => ({
  user: globalDuck.selectors.user(state),
})

const mapDispatchToProps = {
  actionSetActiveNavItem: globalDuck.creators.actionSetActiveNavItem,
  actionReciveDatasets: datasetDuck.creators.actionReciveDatasets,
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(Org)
